/*****************************
 *@file: TogglePageView
 *@author: 陈吕唐
 *@desc：使用Toggle实现页面切换效果
 *@date: 2022-08-13	09:46
 *****************************/
import { Component, Toggle, ToggleContainer, _decorator, warn } from 'cc';
const { ccclass, property } = _decorator;


@ccclass('TogglePageView')
export class TogglePageView extends Component {
    /****************************************************************************************************************
     *Readonly 常量
     ****************************************************************************************************************/
    /****************************************************************************************************************
     *Property 定义变量
     ****************************************************************************************************************/
    /***************************************************************
     *PropertyUI 引用的控件
     ***************************************************************/
    @property({ type: ToggleContainer, tooltip: `视图容器` })
    private viewContainer: ToggleContainer = undefined!;

    @property({ type: ToggleContainer, tooltip: `视图容器` })
    private toggleContainer: ToggleContainer = undefined!;
    /****************************************************************************************************************
     * Lifecycle 生命周期相关方法
     ****************************************************************************************************************/
    protected onLoad(): void {
        if (this.viewContainer && this.toggleContainer) {
            this.init(this.viewContainer, this.toggleContainer);
        }
    }
    /****************************************************************************************************************
     * Public 公有方法
     ****************************************************************************************************************/
    /****************************************************************************************************************
     * private 私有方法
     ****************************************************************************************************************/
    /**
     * 初始化组件,实现点击Toggle切换视图
     * @param viewContainer 
     * @param toggleContainer 
     */
    private init(viewContainer: ToggleContainer, toggleContainer: ToggleContainer) {
        let views = viewContainer.toggleItems;
        let toggles = toggleContainer.toggleItems;

        if (views.length != toggles.length) {
            warn(`Toggle 数量和 View数量不匹配`)
            return;
        }

        for (let i = 0; i < views.length; i++) {
            let view = views[i];
            view.interactable = false;
        }

        for (let i = 0; i < toggles.length; i++) {
            let toggle = toggles[i];
            views[i].isChecked = toggle.isChecked;
            toggle.node.on(Toggle.EventType.TOGGLE, () => { views[i].isChecked = toggle.isChecked }, this)
        }
    }
    /****************************************************************************************************************
     * Property Get && Set 属性的 get && set 函数
     ****************************************************************************************************************/
}